<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	<div id="app">
		{{msg}}
		<subcomp @getsub="getsubdata"></subcomp>
	</div>
	
	
	
	
	<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		let subcomp = {
			/*
				子组件能够改变父组件中的数据（某些数据类型是可以----对象）,
				但不推荐做，尽量使用双向数据流的方式进行数据改变
			*/
			template:`
				<div class="subcomp">
					<h1>{{subdata}}</h1>
					<button @click=run>向父组件发送数据</button>
				</div>
			`,
			data(){
				return {
					subdata:'我是子组件数据'
				}
			},
			methods:{
				run(){
					this.$emit('getsub',this.subdata)
					//通过$emit方法，配合自定义事件数据发送出去
				}
			}
		}
	
	
	
		let myApp = new Vue({
			el:'#app',
			data:{
				msg:'我是父组件',
				obj:{title:'hhhhhh'}
			},
			methods:{
				getsubdata(ev){
					this.msg = ev
				}
			},
			components:{
				subcomp
			}
		})		
	</script>
	
	
</body>
</html>